<template>
  <div class="stepschild1_container">
    <div class="from_box">
      <el-form style="width: 600px" label-width="120px" :model="form" ref="ruleForm">
        <!-- 下拉 -->
        <el-form-item label="属性类型：" prop="productCategory">
          <el-select placeholder="请选择属性类型" v-model="productAttributeCategoryId">
            <el-option v-for="item in AttributeOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 根据属性类型选择，这里会显示对应的规则 -->
        <el-form-item label="商品规格：" prop="productAttributeCategoryItem">
          <el-row class="sizeproduce" style="padding-left: 10px;">
            <!-- 多选框 -->
            <el-checkbox v-model="item.id" :label="item.name" size="large" v-for="item in productAttributeCategoryItem" />
          </el-row>
        </el-form-item>

        <!-- 表格 -->
        <el-form-item>
          <el-table ref="tableRef" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column v-for="item in productAttributeCategoryItem" :label="item.name" />
            <el-table-column label="销售价格" />
            <el-table-column label="商品库存" />
            <el-table-column label="库存预警值" />
            <el-table-column label="SKU编号" />
            <el-table-column label="操作" />
          </el-table>
        </el-form-item>

        <!-- 按钮 -->
        <div class="btn">
          <el-button type="primary" @click="dialogVisible = true">刷新列表</el-button>
          <el-button type="primary" @click="dialogVisible = true">同步价格</el-button>
          <el-button type="primary" @click="dialogVisible = true">同步库存</el-button>
        </div>

        <!-- 弹出 dialog -->
        <el-dialog v-model="dialogVisible" title="提示" width="24%" :before-close="handleClose">
          <div class="txt">
            <el-icon :size="20" color="#e2a03c">
              <WarningFilled />
            </el-icon>
            <span>刷新列表将导致sku信息重新生成，是否要刷新</span>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="dialogVisible = false">
                确定
              </el-button>
            </span>
          </template>
        </el-dialog>

        <el-form-item label="商品参数：" prop="giftSize">
          <el-input v-model="form.giftSize" />
        </el-form-item>

        <!-- 商品相册 -->
        <!-- Upload 上传 --- 用户头像  -->
        <!-- <el-form-item label="商品相册：" prop="pic">
          <el-upload class="avatar-uploader" action="http://120.24.64.5:8088/mall-admin/minio/upload"
            :show-file-list="true" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
            v-model:file-list="form.pic">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item> -->

        <el-upload v-model:file-list="fileList" action="http://120.24.64.5:8088/mall-admin/minio/upload"
          list-type="picture-card" :on-success="handlePictureCardPreview" :on-remove="handleRemove">
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>

        <!-- 规格参数 -->
        <el-form-item label="规格数据：" prop="productAttributeCategoryItem">
          <!-- Tabs 标签页 --- 自定义标签页的内容 -->
          <el-tabs type="border-card" class="demo-tabs" style="width: 100%" :cell-style="{ textAlign: 'center' }">
            <!-- 富文本编辑器 -->
            <!-- 安装 npm i @wangeditor/editor @wangeditor/editor-for-vue-->
            <!-- 在 main.ts 文件中进行全局注册 -->
            <el-tab-pane label="电脑端详情">
              <textRich />
              <div style="display: flex; justify-content: right;margin-top: 10px;">
                <el-button type="primary" :icon="UploadFilled" @click="updatePic = true">上传图片</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="移动端详情">
              <div style="display: flex; justify-content: right;">
                <el-button type="primary" :icon="UploadFilled" @click="updatePic = true">上传图片</el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>

        <!-- 弹出 dialog -->
        <el-dialog v-model="updatePic" width="24%" :before-close="handleClose">
          <div class="image">
            <!-- <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <el-button type="primary">
                  点击上传
                </el-button>
              </el-icon>
            </el-upload> -->
            <el-upload v-model:file-list="fileList" action="http://120.24.64.5:8088/mall-admin/minio/upload"
              list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>
          </div>
          <template #footer>
            <span class="dialog-footer" style="display: flex;justify-content: left;">
              <el-button @click="updatePic = false">取消</el-button>
              <el-button type="primary" @click="updatePic = false">
                确定
              </el-button>
            </span>
          </template>
        </el-dialog>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ApiCurrentProduceAttribute, ApiProductAttributeCategory } from '@/http/pms/api';
import { reactive, ref, watch } from 'vue';
// @ts-ignore
import { ElMessageBox, ElMessage } from 'element-plus'
import { WarningFilled, Plus, UploadFilled } from '@element-plus/icons-vue'
// @ts-ignore
import type { UploadProps, UploadUserFile } from 'element-plus'
// @ts-ignore
import textRich from '@/views/pms/components/addProductChild/MyEditor.vue'

interface forminitInterface {
  // productAttributeCategoryItem: [],
  // giftSize: string,
  pic: string,
}

interface selectOptions {
  id: number,
  name: string,
  type: string,
}

const forminit: forminitInterface = {
  // productAttributeCategoryItem: [],
  // giftSize: '',
  pic: ''
}

// 把form表单的数据做成响应式
const form = reactive({ ...forminit })

// 属性类型
const productAttributeCategoryId = ref<string | number>('')

// 32.8新建一个存 商品分类 --- 选项内容
const AttributeOptions = ref<selectOptions[]>([])

const getForm = ref<any>([])
const currentAttributeCategory = ref<any>()
const productAttributeCategoryItem = ref<any>([])

ApiProductAttributeCategory().then(res => {
  if (res.code === 200) {
    // console.log(res);
    AttributeOptions.value = res.data.list.map((item: any) => ({
      id: item.id,
      name: item.name,
      type: item.paramCount
    }))
  }
  // console.log(AttributeOptions.value);
})

// 请求接口返回的数据
function getAttribute() {
  ApiCurrentProduceAttribute({
    cid: currentAttributeCategory.value.id,
    type: currentAttributeCategory.value.type,
  }).then(res => {
    // console.log(res);
    // 请求成功
    if (res.code === 200) {
      // console.log(res.data);
      // 商品规格
      productAttributeCategoryItem.value = res.data.list
      // console.log(productAttributeCategoryItem.value);

    }
  })
}

// 监听 form 表单的 productAttributeCategoryId 变化
watch(() => productAttributeCategoryId.value, () => {
  // 获取到是这样的对象 {productAttributeCategoryId: 93}
  // console.log(form);
  // 将当前获取到的 from 存起来
  getForm.value = form
  // console.log(getForm.value);

  // 获取到 productAttributeCategoryId 然后再遍历出 currentAttributeCategory.value 里面的内容
  currentAttributeCategory.value = AttributeOptions.value.find((item) => item.id === productAttributeCategoryId.value)

  // 获取到找到相同的id的对象
  // console.log(currentAttributeCategory.value);//{id: 90, name: '', type: 0}
  getAttribute()
})

const dialogVisible = ref(false)
const updatePic = ref(false)

// 点击按钮弹框
const handleClose = (done: () => void) => {
  done()
}

// 点击图片上传的方法
// const imageUrl = ref('')
// const handleAvatarSuccess: UploadProps['onSuccess'] = (
//   uploadFile: { raw: Blob | MediaSource; }
// ) => {
//   imageUrl.value = URL.createObjectURL(uploadFile.raw!)
// }
// const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: any) => {
//   if (rawFile.type !== 'image/jpeg') {
//     ElMessage.error('Avatar picture must be JPG format!')
//     return false
//   } else if (rawFile.size / 1024 / 1024 > 2) {
//     ElMessage.error('Avatar picture size can not exceed 2MB!')
//     return false
//   }
//   return true
// }

const fileList = ref<UploadUserFile[]>([])

const dialogImageUrl = ref('')

// on-remove 文件列表移除文件时的钩子
const handleRemove: UploadProps['onRemove'] = (uploadFile: any, uploadFiles: any) => {
  console.log(uploadFile, uploadFiles)
  form.pic = ''
}

// on - preview 点击文件列表中已上传的文件时的钩子
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile: any) => {
  // dialogImageUrl.value = uploadFile.url!
  // console.log(11111);
  form.pic = fileList.value[0].response.data.url
  console.log(form.pic);

}

// 先获取到ref
const ruleForm = ref<any>(null)


// 将子组件表单数据暴露
defineExpose({
  form,
  ruleForm
})

</script>

<style lang="less" scoped>
.stepschild1_container {
  display: flex;
  flex-direction: column;

  .from_box {
    margin-top: 60px;
  }

  .sizeproduce {
    width: 100%;
    height: 50px;
    background-color: #f8f9fc;
    border-radius: 4px;
    border: 1px solid #eee;
  }

  .btn {
    margin-left: 120px;
    margin-bottom: 20px;
  }

  .txt {
    display: flex;
    align-items: center;

    span {
      margin-left: 10px;
    }
  }
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

:deep(.el-upload) {
  border: 1px dashed #eee;
  border-radius: 6px;
}
</style>